<template>
  <div>
    <!-- <Father :name="name" /> -->
    <Father />
    <!-- <button @click="onChangeName">改变</button> -->
  </div>
</template>

<script>
import {
  ref,
  provide,
  readonly
} from 'vue';
import Test from '@/components/Test';
import Father from '@/components/Father';

// import Vue from 'vue'; // Vue2 中处理响应式provide的数据需要用到

export default {
  name: 'App',
  components: {
    Test,
    Father
  },
  // provide: { // vue2 Options API的用法
  //   name: '张三'
  // },
  // provide() {
  //   return {
  //     name: this.name
  //   }
  // },
  // provide() { // Vue2 中处理响应式provide的数据 需要用到 computed
  //   return {
  //     name: Vue.computed(() => '张三')
  //   }
  // },
  // mounted() {
  //   this.name = '王五'; // 子组件的数据不会改变 默认不是响应式的
  //   console.log(this.name);
  // },
  // data() {
  //   return {
  //     name: '李四'
  //   }
  // },
  setup(props, ctx) {
    // 使用 Provide
    // provide 函数允许你通过两个参数定义 property：
      // name (<String> 类型)
      // value
    
    // provide('name', '张三');
    // provide('age', 23);
    // provide('hobby', 'travel');
    // provide('info', {
    //   mather: '李四',
    //   father: '王五'
    // });

    // 添加响应性
    // 可以在 provide 值时使用 ref 或 reactive。

    const name = ref('张三1');

    provide('name', name);

    // 当使用响应式 provide / inject 值时
    // 建议尽可能将对响应式 property 的所有修改限制在定义 provide 的组件内部。

    const onChangeName = () => {
      name.value = '王五';
    }

    // provide('name', name);

    // 然而，有时需要在注入数据的组件内部更新 inject 的数据。
    // 可以 provide 一个方法来负责改变响应式 property。
    provide('onChangeName', onChangeName);


    // 如果要确保通过 provide 传递的数据不会被 inject 的组件更改，建议对提供者的 property 使用 readonly。
    provide('name', readonly(name));

    // return {
    //   onChangeName
    // }
  }
}
</script>

<style>

</style>
